<script setup>
import router from "@/router/index.js";
import {useRoute} from "vue-router";
import {isHttp} from "@/utils/validate.js";
import {induce} from "@/utils/derive.js";
import {useRouteStore} from "@/store/index.js";
import {get_dictType_name} from "@/apis/data/dictType/index.js";
import {get_table_field_list} from "@/apis/data/field/index.js";
import {
  create_menu,
  create_menu_button,
  delete_menu,
  update_menu_button,
  get_menu_route_list,
  get_menu_button_tree,
  get_menu_obj,
} from "@/apis/system/menu/index.js";
import {message} from "ant-design-vue";
import BIcon from "@/components/Icons/index.vue";

{
  const getModuleType = () => {
    get_dictType_name("权限模块").then(res => {
      if (res.code === 200) {
        pageData.value.moduleTypeList = res.data;
      } else {
        message.error(res.message);
      }
    });
  };

  const getPermissionType = () => {
    get_dictType_name("权限类别").then(res => {
      if (res.code === 200) {
        pageData.value.permissionTypeList = res.data;
      } else {
        message.error(res.message);
      }
    });
  };

  const getMethodType = () => {
    get_dictType_name("接口方法").then(res => {
      if (res.code === 200) {
        pageData.value.methodTypeList = res.data;
      } else {
        message.error(res.message);
      }
    });
  };

  onMounted(() => {
    getModuleType();
    getPermissionType();
    getMethodType();
  });
}

const route = useRoute();
const routeStore = useRouteStore();
const pageData = ref({
  searchVisible: true,
  createVisible: false,
  updateVisible: false,
  viewVisible: false,
  filters: {
    creator: "",
    modifier: "",
    status: 1,
    title: "",
  },
  obj: {
    parent_id: null,
    sort: 1,
    remark: "",
    status: true,
    icon: "",
    title: "",
    permission: "",
    is_ext: 0,
    type: 1,
    path: "",
    redirect: "",
    component: "",
    name: "",
    keepalive: false,
    hide_menu: true,
  },
  createActiveKey: "1",
  menuTypeList: [],
  moduleTypeList: [],
  methodTypeList: [],
  permissionTypeList: [],
  rowSelection: [],
  loading: false,
  total: 0,
  customs: [],
  menuTreeList: [],
  menuButtonList: [],
  enumList: ["icon", "is_ext", "type", "keepalive", "hide_menu"],
});
const method = reactive({
  reset: () => {
    pageData.value.filters = {
      creator: "",
      modifier: "",
      status: 1,
      title: "",
    };
  },
  query: () => {
    pageData.value.dictList = [];
    method.getMenuButtonTree();
  },
  create: (val) => {
    pageData.value.obj = {
      menu_id: null,
      sort: 1,
      remark: "",
      status: true,
      method: "1",
      icon: "",
      title: "",
      permission: "",
      is_ext: 0,
      type: 1,
      path: "",
      redirect: "",
      component: "",
      name: "",
      keepalive: 0,
      hide_menu: 0,
    };
    pageData.value.createVisible = val;
  },
  selectIcon: (val) => {
    pageData.value.obj.icon = val;
  },
  createOk: () => {
    if (pageData.value.createActiveKey === "1") {
      if (pageData.value.obj.type === 0) {
        pageData.value.obj.component = `../views/${pageData.value.obj.name}`;
      } else {
        pageData.value.obj.component = `../views/${pageData.value.obj.name}/index.vue`;
      }
      create_menu(pageData.value.obj).then(async res => {
        if (res.code === 200) {
          message.success(res.message);
          method.getMenuButtonTree();
          // 新增菜单后刷新用户路由列表
          const accessRoutes = await routeStore.generateRouteTree();
          accessRoutes.forEach((route) => {
            if (!isHttp(route.path)) {
              router.addRoute(route); // 动态添加可访问路由表
            }
          });
          method.closeCreate();
        } else {
          message.error(res.message);
        }
      });
    } else if (pageData.value.createActiveKey === "2") {
      pageData.value.obj.code = `${pageData.value.obj.module}:${pageData.value.obj.code}:${pageData.value.obj.permission}`;
      create_menu_button(pageData.value.obj).then(res => {
        if (res.code === 200) {
          message.success(res.message);
          method.getMenuButtonTree();
          method.closeCreate();
        } else {
          message.error(res.message);
        }
      });
    }
  },
  closeCreate: () => {
    pageData.value.createVisible = false;
  },
  deleteAll: (val) => {
    if (val) {
      method.getMenuButtonTree();
    }
  },
  derive: () => {
    induce(route.meta.title, pageData.value.customs, pageData.value.menuButtonList);
    message.success("导出成功");
    method.getMenuButtonTree();
  },
  search: () => {
    pageData.value.searchVisible = !pageData.value.searchVisible;
  },
  refresh: () => {
    pageData.value.dictList = [];
    method.getMenuButtonTree();
  },
  export: (val) => {
    if (val) {
      method.getMenuButtonTree();
    }
  },
  getColumnsList: () => {
    const params = {
      name: route.meta.title,
      path: route.path,
    };
    get_table_field_list(params).then(res => {
      if (res.code === 200) {
        pageData.value.customs = res.data;
      } else {
        message.error(res.message);
      }
    });
  },
  getMenuRouteList: () => {
    get_menu_route_list(pageData.value.filters).then(res => {
      if (res.code === 200) {
        pageData.value.menuTreeList = res.data;
      } else {
        message.error(res.message);
      }
    });
  },
  getMenuButtonTree: () => {
    pageData.value.loading = true;
    get_menu_button_tree(pageData.value.filters).then(res => {
      if (res.code === 200) {
        pageData.value.menuButtonList = res.data;
        pageData.value.loading = false;
      } else {
        message.error(res.message);
      }
    });
  },
  update: (val) => {
    pageData.value.updateVisible = true;
    get_menu_obj(val.id).then(res => {
      if (res.code === 200) {
        pageData.value.obj = res.data;
        console.log(pageData.value.obj);
        pageData.value.obj.type = pageData.value.obj.type ? 1 : 0;
      } else {
        message.error(res.message);
      }
    });
  },
  deleteItems: (record) => {
    pageData.value.obj.items.forEach((item, index) => {
      if (item.id === record.id) {
        pageData.value.obj.items.splice(index, 1);
      }
    });
  },
  updateOk: () => {
    pageData.value.obj.parent_id = pageData.value.obj.parent || 0;
    update_menu_button(pageData.value.obj.id, pageData.value.obj).then(res => {
      if (res.code === 200) {
        pageData.value.updateVisible = false;
        method.getMenuButtonTree();
        message.success(res.message);
      } else {
        message.error(res.message);
      }
    });
  },
  closeUpdate: () => {
    pageData.value.updateVisible = false;
  },
  delete: () => {
    method.getMenuButtonTree();
  },
  view: (val) => {
    pageData.value.viewVisible = true;
    get_menu_obj(val.id).then(res => {
      if (res.code === 200) {
        pageData.value.obj = res.data;
        pageData.value.obj.type = pageData.value.obj.type ? 1 : 0;
      } else {
        message.error(res.message);
      }
    });
  },
});
onMounted(() => {
  method.getColumnsList();
  method.getMenuRouteList();
  method.getMenuButtonTree();
});
</script>

<template>
  <Search v-if="pageData.searchVisible">
    <a-form :model="pageData.filters">
      <a-row :gutter="24">
        <a-col :span="4">
          <a-form-item label="菜单名称">
            <a-input v-model:value="pageData.filters.title" placeholder="菜单名称" allow-clear/>
          </a-form-item>
        </a-col>
        <a-col :span="4">
          <a-form-item label="状态">
            <a-select v-model:value="pageData.filters.status">
              <a-select-option :value="1">启用</a-select-option>
              <a-select-option :value="0">禁用</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="5">
          <a-form-item>
            <a-button style="margin-right: 10px" @click="method.reset">重置</a-button>
            <a-button type="primary" @click="method.query">查询</a-button>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </Search>
  <Operate
      @onHandleCreate="method.create"
      @onHandleDerive="method.derive"
      @onHandleSearch="method.search"
      @onHandleRefresh="method.refresh"
      @onHandleExport="method.export"
  ></Operate>
  <Table
      :loading="pageData.loading"
      :columns="pageData.customs"
      :data-list="pageData.menuButtonList"
      :enum-list="pageData.enumList"
      :delete="delete_menu"
      @update="method.update"
      @delete="method.delete"
      @view="method.view"
  >
    <!-- 枚举字段 -->
    <template v-slot:icon="data">
      <b-icon v-if="data.text" :type="data.text"/>
    </template>
    <template v-slot:is_ext="data">
      <a-switch v-model:checked="data.text" checked-children="是" un-checked-children="否"/>
    </template>
    <template v-slot:type="data">
      <a-tag v-if="!data.text" color="blue">目录</a-tag>
      <a-tag v-else-if="data.text === 3" color="pink">按钮</a-tag>
      <a-tag v-else color="green">菜单</a-tag>
    </template>
    <template v-slot:keepalive="data">
      <a-switch v-model:checked="data.text" checked-children="是" un-checked-children="否"/>
    </template>
    <template v-slot:hide_menu="data">
      <a-switch v-model:checked="data.text" checked-children="是" un-checked-children="否"/>
    </template>
  </Table>
  <a-modal
      v-model:open="pageData.createVisible"
      title="新增"
      ok-text="保存"
      cancel-text="取消"
      width="900px"
      @close="method.closeCreate"
      @cancel="method.closeCreate"
      @ok="method.createOk"
  >
    <a-card>
      <a-tabs v-model:activeKey="pageData.createActiveKey">
        <a-tab-pane key="1" tab="菜单">
          <a-form :model="pageData.obj" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item label="菜单类型" :colon="false" required>
                  <a-select v-model:value="pageData.obj.type">
                    <a-select-option :value="0">目录</a-select-option>
                    <a-select-option :value="1">菜单</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="上级菜单" :colon="false">
                  <a-tree-select
                      style="width: 100%"
                      v-model:value="pageData.obj.parent_id"
                      placeholder="上级菜单"
                      :tree-data="pageData.menuTreeList"
                      :field-names="{
                        children: 'children',
                        label: 'title',
                        value: 'id',
                      }"
                      tree-node-filter-prop="title"
                      allow-clear
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item label="菜单名称" :colon="false" required>
                  <a-input v-model:value="pageData.obj.title" placeholder="菜单名称" allow-clear/>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="菜单图标" :colon="false">
                  <icons-select :icon="pageData.obj.icon" @update:icon="method.selectIcon">
                    <template #iconSelect>
                      <a-input v-model:value="pageData.obj.icon"/>
                    </template>
                  </icons-select>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item label="路由地址" :colon="false">
                  <a-input v-model:value="pageData.obj.path" placeholder="路由地址" allow-clear/>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="重定向" :colon="false">
                  <a-input v-model:value="pageData.obj.redirect" placeholder="重定向地址" allow-clear/>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item label="组件名称" :colon="false">
                  <a-input v-model:value="pageData.obj.name" placeholder="组件名称" allow-clear/>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="组件地址" :colon="false">
                  <a-input v-model:value="pageData.obj.component" placeholder="组件地址自动生成" disabled allow-clear/>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item label="是否外链" :colon="false">
                  <a-switch v-model:checked="pageData.obj.is_ext" checked-children="是" un-checked-children="否"/>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="权限标识" :colon="false">
                  <a-input v-model:value="pageData.obj.permission" placeholder="权限标识" allow-clear/>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item label="页面缓存" :colon="false">
                  <a-switch v-model:checked="pageData.obj.keepalive" checked-children="是" un-checked-children="否"/>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="侧边隐藏" :colon="false">
                  <a-switch v-model:checked="pageData.obj.hide_menu" checked-children="是" un-checked-children="否"/>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item label="状态" :colon="false">
                  <a-switch v-model:checked="pageData.obj.status" checked-children="启用" un-checked-children="禁用"/>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="排序" :colon="false">
                  <a-input-number style="width: 100%;" v-model:value="pageData.obj.sort" placeholder="排序"
                                  allow-clear/>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item label="备注" :colon="false">
                  <a-input v-model:value="pageData.obj.remark" placeholder="备注" allow-clear/>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </a-tab-pane>
        <a-tab-pane key="2" tab="权限">
          <a-form :model="pageData.obj" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item label="所属菜单" :colon="false" required>
                  <a-tree-select
                      style="width: 100%"
                      v-model:value="pageData.obj.menu_id"
                      placeholder="所属菜单"
                      :tree-data="pageData.menuTreeList"
                      :field-names="{
                        children: 'children',
                        label: 'title',
                        value: 'id',
                      }"
                      tree-node-filter-prop="title"
                      allow-clear
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item label="按钮名称" :colon="false" required>
                  <a-input v-model:value="pageData.obj.title" placeholder="按钮名称" allow-clear/>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="权限标识" :colon="false" required>
                  <a-input v-model:value="pageData.obj.code" placeholder="菜单" allow-clear>
                    <template #addonBefore>
                      <a-select style="width: 105px" v-model:value="pageData.obj.module"
                                placeholder="模块"
                                allow-clear>
                        <a-select-option
                            v-for="item in pageData.moduleTypeList"
                            :key="item.id"
                            :value="item.value">
                          {{ item.name }}
                        </a-select-option>
                      </a-select>
                    </template>
                    <template #addonAfter>
                      <a-select style="width: 100px" v-model:value="pageData.obj.permission"
                                placeholder="权限类别"
                                allow-clear>
                        <a-select-option
                            v-for="item in pageData.permissionTypeList"
                            :key="item.id"
                            :value="item.value">
                          {{ item.name }}
                        </a-select-option>
                      </a-select>
                    </template>
                  </a-input>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item label="请求地址" :colon="false" required>
                  <a-input v-model:value="pageData.obj.api" placeholder="请求地址" allow-clear/>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="请求方法" :colon="false" required>
                  <a-select v-model:value="pageData.obj.method"
                            placeholder="增-post 删-delete 改-put 查-get"
                            allow-clear>
                    <a-select-option
                        v-for="item in pageData.methodTypeList"
                        :key="item.id"
                        :value="item.value">
                      {{ item.name }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item label="状态" :colon="false">
                  <a-switch v-model:checked="pageData.obj.status" checked-children="启用" un-checked-children="禁用"/>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="排序" :colon="false">
                  <a-input-number style="width: 100%;" v-model:value="pageData.obj.sort" placeholder="排序"
                                  allow-clear/>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item label="备注" :colon="false">
                  <a-input v-model:value="pageData.obj.remark" placeholder="备注" allow-clear/>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </a-modal>
  <a-modal
      style="height: 800px; overflow-y: auto;"
      v-model:open="pageData.updateVisible"
      title="编辑"
      ok-text="保存"
      cancel-text="取消"
      width="900px"
      @close="method.closeUpdate"
      @cancel="method.closeUpdate"
      @ok="method.updateOk"
  >
    <a-divider></a-divider>
    <a-form :model="pageData.obj" :label-col="{ span: 5 }" :wrapper-col="{ span: 17 }">
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="菜单类型" :colon="false" required>
            <a-select v-model:value="pageData.obj.type">
              <a-select-option :value="0">目录</a-select-option>
              <a-select-option :value="1">菜单</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="上级菜单" :colon="false">
            <a-tree-select
                style="width: 100%"
                v-model:value="pageData.obj.parent"
                placeholder="上级菜单"
                :tree-data="pageData.menuTreeList"
                :field-names="{
                        children: 'children',
                        label: 'title',
                        value: 'id',
                      }"
                tree-node-filter-prop="title"
                allow-clear
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="菜单名称" :colon="false" required>
            <a-input v-model:value="pageData.obj.title" placeholder="菜单名称" allow-clear/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="菜单图标" :colon="false">
            <icons-select :icon="pageData.obj.icon" @update:icon="method.selectIcon">
              <template #iconSelect>
                <a-input v-model:value="pageData.obj.icon"/>
              </template>
            </icons-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="路由地址" :colon="false">
            <a-input v-model:value="pageData.obj.path" placeholder="路由地址" allow-clear/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="重定向" :colon="false">
            <a-input v-model:value="pageData.obj.redirect" placeholder="重定向地址" allow-clear/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="组件名称" :colon="false">
            <a-input v-model:value="pageData.obj.name" placeholder="组件名称" allow-clear/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="组件地址" :colon="false">
            <a-input v-model:value="pageData.obj.component" placeholder="组件地址自动生成" disabled allow-clear/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="是否外链" :colon="false">
            <a-switch v-model:checked="pageData.obj.is_ext" checked-children="是" un-checked-children="否"/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="权限标识" :colon="false">
            <a-input v-model:value="pageData.obj.permission" placeholder="权限标识" allow-clear/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="页面缓存" :colon="false">
            <a-switch v-model:checked="pageData.obj.keepalive" checked-children="是" un-checked-children="否"/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="侧边隐藏" :colon="false">
            <a-switch v-model:checked="pageData.obj.hide_menu" checked-children="是" un-checked-children="否"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="创建人" :colon="false">
            <a-input v-model:value="pageData.obj.creator" placeholder="创建人" allow-clear/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="修改人" :colon="false">
            <a-input v-model:value="pageData.obj.modifier" placeholder="修改人" allow-clear/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="创建时间" :colon="false">
            <a-input v-model:value="pageData.obj.create_time" placeholder="创建时间" allow-clear/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="修改时间" :colon="false">
            <a-input v-model:value="pageData.obj.update_time" placeholder="修改时间" allow-clear/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="排序" :colon="false">
            <a-input-number style="width: 100%;" v-model:value="pageData.obj.sort" placeholder="排序" allow-clear/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="备注" :colon="false">
            <a-input v-model:value="pageData.obj.remark" placeholder="备注" allow-clear/>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <a-card title="菜单按钮">
      <a-table :data-source="pageData.obj.items" :scroll="{x: 2000}">
        <a-table-column key="id" title="id" data-index="id"/>
        <a-table-column key="title" title="按钮名称" data-index="title"/>
        <a-table-column key="code" title="按钮值" data-index="code"/>
        <a-table-column key="api" title="请求地址" data-index="api"/>
        <a-table-column key="method" title="请求方法" data-index="method">
          <template #default="{ record }">
            <a-tag v-if="record.method === 2" color="blue">POST</a-tag>
            <a-tag v-else-if="record.method === 4" color="red">DELETE</a-tag>
            <a-tag v-else-if="record.method === 3" color="pink">PUT</a-tag>
            <a-tag v-else-if="record.method === 1" color="green">GET</a-tag>
          </template>
        </a-table-column>
        <a-table-column key="sort" title="排序" data-index="sort"/>
        <a-table-column key="status" title="状态" data-index="status"/>
        <a-table-column key="creator" title="创建人" data-index="creator"/>
        <a-table-column key="modifier" title="修改人" data-index="modifier"/>
        <a-table-column key="create_time" title="创建时间" data-index="create_time"/>
        <a-table-column key="update_time" title="修改时间" data-index="update_time"/>
        <a-table-column key="operate" title="操作" data-index="operate">
          <template #default="{ record }">
            <a-button type="primary" danger @click="method.deleteItems(record)">删除</a-button>
          </template>
        </a-table-column>
      </a-table>
    </a-card>
  </a-modal>
  <a-drawer
      v-model:open="pageData.viewVisible"
      title="查看"
      width="800"
  >
    <a-form :model="pageData.obj" :label-col="{ span: 5 }" :wrapper-col="{ span: 17 }">
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="菜单类型" :colon="false" required>
            <a-select v-model:value="pageData.obj.type">
              <a-select-option :value="0">目录</a-select-option>
              <a-select-option :value="1">菜单</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="上级菜单" :colon="false">
            <a-tree-select
                style="width: 100%"
                v-model:value="pageData.obj.parent"
                placeholder="上级菜单"
                :tree-data="pageData.menuTreeList"
                :field-names="{
                        children: 'children',
                        label: 'title',
                        value: 'id',
                      }"
                tree-node-filter-prop="title"
                allow-clear
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="菜单名称" :colon="false" required>
            <a-input v-model:value="pageData.obj.title" placeholder="菜单名称" allow-clear/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="菜单图标" :colon="false">
            <icons-select :icon="pageData.obj.icon" @update:icon="method.selectIcon">
              <template #iconSelect>
                <a-input v-model:value="pageData.obj.icon"/>
              </template>
            </icons-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="路由地址" :colon="false">
            <a-input v-model:value="pageData.obj.path" placeholder="路由地址" allow-clear/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="重定向" :colon="false">
            <a-input v-model:value="pageData.obj.redirect" placeholder="重定向地址" allow-clear/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="组件名称" :colon="false">
            <a-input v-model:value="pageData.obj.name" placeholder="组件名称" allow-clear/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="组件地址" :colon="false">
            <a-input v-model:value="pageData.obj.component" placeholder="组件地址自动生成" disabled allow-clear/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="是否外链" :colon="false">
            <a-switch v-model:checked="pageData.obj.is_ext" checked-children="是" un-checked-children="否"/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="权限标识" :colon="false">
            <a-input v-model:value="pageData.obj.permission" placeholder="权限标识" allow-clear/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="页面缓存" :colon="false">
            <a-switch v-model:checked="pageData.obj.keepalive" checked-children="是" un-checked-children="否"/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="侧边隐藏" :colon="false">
            <a-switch v-model:checked="pageData.obj.hide_menu" checked-children="是" un-checked-children="否"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="创建人" :colon="false">
            <a-input v-model:value="pageData.obj.creator" placeholder="创建人" allow-clear/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="修改人" :colon="false">
            <a-input v-model:value="pageData.obj.modifier" placeholder="修改人" allow-clear/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="创建时间" :colon="false">
            <a-input v-model:value="pageData.obj.create_time" placeholder="创建时间" allow-clear/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="修改时间" :colon="false">
            <a-input v-model:value="pageData.obj.update_time" placeholder="修改时间" allow-clear/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="排序" :colon="false">
            <a-input-number style="width: 100%;" v-model:value="pageData.obj.sort" placeholder="排序" allow-clear/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="备注" :colon="false">
            <a-input v-model:value="pageData.obj.remark" placeholder="备注" allow-clear/>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <a-card title="菜单按钮">
      <a-table :data-source="pageData.obj.items" :scroll="{x: 2000}">
        <a-table-column key="id" title="id" data-index="id"/>
        <a-table-column key="title" title="按钮名称" data-index="title"/>
        <a-table-column key="code" title="按钮值" data-index="code"/>
        <a-table-column key="api" title="请求地址" data-index="api"/>
        <a-table-column key="method" title="请求方法" data-index="method">
          <template #default="{ record }">
            <a-tag v-if="record.method === 2" color="blue">POST</a-tag>
            <a-tag v-else-if="record.method === 4" color="red">DELETE</a-tag>
            <a-tag v-else-if="record.method === 3" color="pink">PUT</a-tag>
            <a-tag v-else-if="record.method === 1" color="green">GET</a-tag>
          </template>
        </a-table-column>
        <a-table-column key="sort" title="排序" data-index="sort"/>
        <a-table-column key="status" title="状态" data-index="status"/>
        <a-table-column key="creator" title="创建人" data-index="creator"/>
        <a-table-column key="modifier" title="修改人" data-index="modifier"/>
        <a-table-column key="create_time" title="创建时间" data-index="create_time"/>
        <a-table-column key="update_time" title="修改时间" data-index="update_time"/>
      </a-table>
    </a-card>
  </a-drawer>
</template>

<style scoped lang="less">

</style>